<template>
     <!-- floor开始   start -->
    <div class="floor">
        <div class="py-floor w ">
            <div class="floor_top">
                <h3>{{list.name}}</h3>
                <ul>
                    <li v-for="(li,index) in list.navList" :key="index">
                        <a href="" class="red">{{li.text}}</a>
                    </li>
                </ul>
            </div>
            <div class="floor_bootom">
                <div class="floor-1">
                    <div class="floor_top_left">
                        <div class="li_top">
                            <ul>
                                <li v-for="(keyw,index) in list.keywords" :key="index">{{keyw}}</li>
                            </ul>
                        </div>
                        <img :src="list.imgUrl" alt="" class="floor_img"> 
                    </div>
                    <div class="floor_li">
                        <Carousel :list="list.carouselList"/>
                        <!-- <div class="floor_banner">
                            <div class="floor_banner_fi">
                                <div class="floor_center" v-for="carlist in fl.carouselList" :key="carlist.id">
                                    <a href.prevent="">
                                        <img :src="carlist.imgUrl" alt="">
                                    </a>
                                </div>
                            </div>
                            <a href="" class="floor_banner_left floor_a">
                                <span class="iconfont icon-zuojiantou"></span>
                            </a>
                            <a href="" class="floor_banner_right floor_a">
                                <span class="iconfont icon-youjiantou1"></span>
                            </a>
                            <ul>
                                <li><a href=""></a></li>
                                <li><a href=""></a></li>
                                <li><a href=""></a></li>
                            </ul>
                        </div> -->
                    </div>
                    <div class="floor_left">
                        <div class="bottom_floor">
                            <img :src="list.recommendList[0]" alt="" >
                        </div>
                       <div>
                            <img :src="list.recommendList[1]" alt="" >  
                       </div>
                    </div>
                    <div class="floor_left">
                        <img :src="list.bigImg" alt="" class="bottom_floor">
                    </div>
                    <div class="floor_left">
                        <div class="bottom_floor">
                            <img :src="list.recommendList[2]" alt="" >
                        </div>
                       <div>
                            <img :src="list.recommendList[3]" alt="" >  
                       </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- floor结束   end -->
</template>

<script>
import Swiper from 'swiper'
export default {
    name:'Floor',
    props:['list'],
    mounted() {
        console.log();
    },
    watch:{
        list:{
            immediate:true,
            handler(){
                this.$nextTick(()=>{
                      this.mySwiper = new Swiper (this.$refs.floor, {
                            autoplay: { //自动循环播放轮播图
                                delay: 3000,
                                stopOnLastSlide: false,
                                disableOnInteraction: true,
                            },
                            direction: 'horizontal', // 垂直切换选项
                            loop: true, // 循环模式选项
                            
                            // 如果需要分页器
                            pagination: {
                                el: '.swiper-pagination',
                                clickable :true,
                            },
                            
                            // 如果需要前进后退按钮
                            navigation: {
                                nextEl: '.swiper-button-next',
                                prevEl: '.swiper-button-prev',
                            },
                        })  
                })
            }
        }
    },
    
}
</script>

<style scoped lang='less'>
//floor 开始    start
.floor{
    margin-top: 10px;
    .py-floor{
        .floor_top{
            border-bottom: 2px solid #e1251b;
            display: flex;
            justify-content: space-between;
            box-sizing: border-box;
            padding-right: 20px;
            h3{
                color: #c81623;
                font-size: 20px;
                line-height: 30px;
                margin: 9px 0;
                font-weight: 700;
            }
            ul{
                display: flex;  
                 &>li:first-child{
                     a{
                          color: red;
                     }  
                }    
                li{
                    align-self: center;
                    a::after{
                        content: "|";
                        padding: 0 10px;
                    }
                    &>a:hover{
                        color: blue;
                    }
                }
                &>li:last-child{
                     a::after{
                        content: "";
                        padding: 0;
                     }  
                }
                
                .floor_test{
                    padding: 0 10px;
                } 
            }
        }
        .floor_bootom{
            .floor-1{
                height: 360px;
                display: flex;
                .floor_top_left{
                    width: 210px;
                    height: 100%;
                    background: #f7f7f7;
                    .li_top{
                        ul{
                            padding: 15px 0px;
                            display: flex;
                            flex-wrap: wrap;
                            justify-content: space-around;
                            li{
                                border-bottom: 1px solid #e4e4e4;
                                width: 40%;
                                text-align: center;
                                line-height: 26px;
                            }
                        }
                    }
                    .floor_img{
                        width: 100%;
                        height: 249px;
                    }
                }
                .floor_li{
                    position: relative;
                    .swiper{
                        height: 100%;
                        width: 329px;
                        overflow: hidden;
                    }
                }
                .floor_left{
                    border-right: 1px solid #e4e4e4;
                    border-bottom: 1px solid #e4e4e4;
                    height: 359px;
                }
                .floor_left:last-child{
                    border-right: 0;
                }
                .bottom_floor{
                    border-bottom: 1px solid #e4e4e4;
                }
            }
        }
    }
  
}
//floor 结束     end
</style>